<template>
	<div class="Fang">
		<div class="FangTop">
			<van-nav-bar title="注册" left-arrow @click-left="$router.back()" />
		</div>
		<van-form @submit="onSubmit" :validate-first="true" ref="loginForm">
			<div class="Fangdeng">
				<van-cell-group>
					<van-field v-model="username" 
					 name="username" label="手机号"
					 placeholder="请输入手机号"
					:rules="[{ required: true, message: '请填写用户名' },{ pattern:/^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]" />
				</van-cell-group>

				<div class="Fangma">

					<van-field name="vercode" v-model="vercode" center clearable label="短信验证码" placeholder="请输入短信验证码"
						:rules="[{ required: true, message: '请填写验证码' },{ pattern:/^\d{6}$/, message: '验证码格式错误' }]">
						<template #button>
							<van-button size="small" type="primary" native-type="button" @click="send">{{btnTips}}
							</van-button>
						</template>
					</van-field>
				</div>

				<van-cell-group>

					<van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
						:rules="[{ required: true, message: '请填写密码' },{ pattern:/^\w{6,12}$/, message: '密码格式错误' }]" />
				</van-cell-group>

			</div>
			<div class="btn">
				<button native-type="submit">注册</button>
			</div>

		</van-form>
	</div>
</template>

<script>
	import request from '@/api/request.js'
	import {
		Field,
		Form
	} from 'vant';

	import {
		reg,
		sendSms
	} from '@/api/user.js'
	export default {
		data() {
			return {
				username: '',
				vercode: '',
				password: '',
				clickable: true,
				btnTips: '发送验证码',
				time: 10
			}
		},
		created() {
			// request.post('/user/delete_user',{
			//  username:'18339413550',
			//  password:'123456'
			// })
		},
		methods: {
			onSubmit(values) {
				
				reg(values).then(res => {

					if (res.code == 0) {
						this.$toast(res.msg);
						let {
							token,
							tokenExpired,
							uid,
							userInfo
						} = res;

						localStorage.setItem('token', token)
						localStorage.setItem('tokenExpired', tokenExpired)
						localStorage.setItem('uid', uid)
						localStorage.setItem('userInfo', JSON.stringify(userInfo));
						setTimeout(v => {
							this.$router.back()
						}, 500)


					} else {
						this.$toast(res.msg)
					}
				})



			},
			// 发送验证码
			async send() {
				//  如果他是不可点击的状态 直接返回 
				if (!this.clickable) {
					console.log('现在加锁 不能往下执行')
					return
				}
				try {
					let res = await this.$refs.loginForm.validate('username');

					//  校验通过  把状态变成 不可点击的  
					this.clickable = false;
					this.btnTips = '发送中...'
					let {
						username: mobile
					} = this;
					sendSms({
						mobile,
						type: 'register' //  场景  现在是注册场景  
					}).then(({
						code,
						msg,
						data
					}) => {
						if (code == 0) {
							this.$toast(msg + data);
							this.btnTips = this.time + "s";
							let timer = setInterval(v => {
								this.time--;
								this.btnTips = this.time + "s";

								if (this.time <= 0) {
									this.btnTips = '再次获取';
									this.clickable = true;
									clearInterval(timer)
								}
							}, 1000)


						} else {
							//  手机存在 等等情况  
							this.$toast(msg);
							this.clickable = true;
							this.btnTips = '发送验证码'
						}

					}).catch(err => {
						console.log(err)
						this.clickable = true;
						this.btnTips = '发送验证码'
					})



				} catch (e) {
					//TODO handle the exception
				}

			}
		},
		components: {
			[Field.name]: Field,
			[Form.name]: Form,
		}

	}
</script>

<style>
	.Fang {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.van-nav-bar .van-icon {
		color: #fff;
	}

	.van-nav-bar__content {
		background-color: #07c160;
	}

	.van-nav-bar__title {
		/* font-size: 5.26667vw; */
		color: #fff;
	}

	.van-field__button {

		width: 80px;
		padding-right: 10px;
		color: black;
		border-radius: 20px;
	}

	van-cell-group {
		display: flex;
	}

	van-cell-group i {
		padding-top: 7px;
		padding-left: 6px;
	}

	.Fangma {
		display: flex;
	}

	.Fangma i {
		padding-top: 7px;
		padding-left: 6px;
	}

	.Fang .btn button {
		margin: 30px 0 0 37px;
		width: 80vw;
		height: 40px;
		background-color: #07c160;
		border: #07c160;
		font-size: 20px;
		color: #fff;
	}
</style>
